<!--已结算的直播带货详情页-->
<template>
  <view class="box_b_content">
    <view class="box_title">
      <c-navigation-bar :title="$t('user.taskDetail')"/>
    </view>
    <view class="box_content">
      <scroll-view scroll-y="true" class="scroll-Y">
        <!--  任务信息布局      -->
        <view class="box_task_root">
          <!--    任务信息      -->
          <text style="color: #91909A;font-size: 30rpx;margin: 20rpx 40rpx 40rpx;">
            {{ $t('user.taskName') }}:<span style="color: #1B1D29;margin-left: 10rpx">{{ taskName }}</span>
          </text>
          <text style="color: #91909A;font-size: 30rpx;margin: 0rpx 40rpx 40rpx;">
            {{ $t('user.taskDesc') }}:<span
              style="color: #1B1D29;margin-left: 10rpx">{{ goodsDetail }}</span>
          </text>
          <text style="color: #91909A;font-size: 30rpx;margin: 0rpx 40rpx 40rpx;">
            {{ $t('user.goodsAnchor') }}:<span style="color: #1B1D29;margin-left: 10rpx">{{ goodsAnchor }}</span>
          </text>
          <text style="color: #91909A;font-size: 30rpx;margin: 0rpx 40rpx 40rpx;">
            {{ $t('user.endTime') }}:<span style="color: #1B1D29;margin-left: 10rpx">{{publicJS.timeZoneSwitching(endTime)  }}</span>
          </text>

          <view style="width: 100vh;height: 8rpx;background-color: #F7F8FA"/>

          <view style="flex: 1;justify-content: center;align-items: center;display: flex">
            <text style="color: #1B1D29;font-size: 28rpx;margin-top: 28rpx">{{ $t('user.goodsInfo') }}</text>
          </view>

          <!--    商品列表    -->
          <view class="product">
            <view class="line" v-for="product in productList" :key="product.id" @click="goProductDetail(product)">
              <u-image :src="$u.file.getMedieUrl(product.image)" width="160rpx" height="154rpx"></u-image>
              <view class="left">
                <view class="text">{{ product.goodsName }}</view>
                <view class="text">{{ product.goodsDesc }}</view>
                <view class="flex">
                  <view class="font">
                    <text>${{ product.originalPrice }}</text>
                  </view>
                </view>
              </view>
            </view>

          </view>

          <view style="width: 100vh;height: 8rpx;background-color: #F7F8FA"/>
        </view>
        <!--  带货情况布局      -->
        <view class="box_task_root">
          <!--    带货情况      -->

          <view class="box_task_info_detail">
            <view style="flex: 1;justify-content: center;align-items: center;display: flex">
              <text style="color: #1B1D29;font-size: 28rpx;">{{ $t('user.goodsWork') }}</text>
            </view>
            <view class="box_goods_info">
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.goodsTime') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ livesDuration }}{{ $t('user.minute') }}</span>
              </text>
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.seeNo') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ viewsNumber }}</span>
              </text>
            </view>
            <view class="box_goods_info">
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.goodsNo') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ goodsNo }}</span>
              </text>
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.orderNo') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ orderNo }}</span>
              </text>
            </view>
            <view class="box_goods_info">
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.goodsMoney') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ goodsMoney }}</span>
              </text>
              <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
                {{ $t('user.storeFens') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ storeFens }}</span>
              </text>
            </view>
          </view>
        </view>
        <!--  收益情况布局      -->
        <view class="box_task_root">
          <view class="box_task_info_detail" style="margin-bottom: 48rpx">
            <!--    收益情况      -->
            <view style="flex: 1;justify-content: center;align-items: center;display: flex">
              <text style="color: #1B1D29;font-size: 28rpx;">{{ $t('user.getInfo') }}</text>
            </view>
            <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
              {{ $t('user.saleTotal') }}:<span style="color: #1B1D29;margin-left: 6rpx">{{ saleTotalMoney }}</span>
            </text>
            <text style="color: #91909A;font-size: 24rpx;margin-top: 30rpx;">
              {{ $t('user.anchorMoney') }}:<span style="color: #1B1D29;margin-left: 6rpx">${{anchorYongMoney}}
              <span
                  style="color: #91909A;margin-left: 74rpx;font-size: 20rpx">{{ $t('user.saveMoney') }} = {{ $t('user.baseMoney') }}${{basicSalary}} + {{ $t('user.riseMoney') }}${{Number(orderIncome) + Number(giftCommission) }}</span></span>
            </text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskId: 0,//任务ID
      productList: [],//商品列表
      taskName: '',//任务名称
      goodsDetail: '',//带货详情
      goodsAnchor: '',//带货主播
      endTime: '',//结束时间
      livesDuration: 0,//带货时长
      viewsNumber: 0,//观看人数
      goodsNo: 0,//带货数量
      orderNo: 0,//订单数量
      goodsMoney: 0,//带货金额
      storeFens: 0,//店铺粉丝
      saleTotalMoney: 0,//销售总额
      anchorYongMoney: 0,//主播佣金
      basicSalary: 0,//底薪
      giftCommission: 0,//提成
    };
  },
  onLoad(option) {
    this.taskId = option.taskId;
  },
  mounted() {
    this.getGoodsList();
    this.getSalesMissionDetails();
  },
  methods: {
    
    //点击跳转到商品详情页
    goProductDetail(item) {
      uni.navigateTo({
        url: '/pages/productDetails/productDetails?productId=' + item.id
      });
    },
    //获取货物列表
    getGoodsList() {
      this.$u.get('/app/anchor/sell/lives/sellLivesDetail/' + this.taskId).then(res => {
        this.productList = res.data.goodsChildList;
      })
    },
    //获取带货任务结算详情
    getSalesMissionDetails() {
      this.$u.get('/app/anchor/salesMissionDetails/' + this.taskId).then(res => {
        //     storeFens:'',//店铺粉丝
        this.taskName = res.data.livesSessionName
        this.goodsDetail = res.data.taskIntroduction
        this.goodsAnchor = res.data.anchorName
        this.endTime = res.data.endTime
        this.livesDuration = res.data.livesDuration
        this.viewsNumber = res.data.viewsNumber
        this.goodsNo = res.data.salesVolume
        this.goodsMoney = res.data.salesAmount.toFixed(2)
        this.orderNo = res.data.orderQuantity
        this.saleTotalMoney = res.data.orderIncome.toFixed(2)
        this.basicSalary = res.data.basicSalary.toFixed(2)
        this.giftCommission = res.data.giftCommission.toFixed(2)
		this.orderIncome=res.data.orderIncome.toFixed(2)
        this.anchorYongMoney = (Number(this.basicSalary) +  Number(this.orderIncome)+ Number(this.giftCommission)).toFixed(2) 
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.box_b_content {
  display: flex;
  flex-direction: column;

  .box_title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* 设置一个比较高的z-index值，保证标题区域在最上层显示 */
  }

  .box_content {
    margin-top: 220rpx;
    display: flex;
    flex-direction: column;

    .btn_has_finish {
      background-color: #eae5e5;
      margin: 20rpx 20rpx 30rpx;
    }

    /*任务信息*/
    .box_task_root {
      display: flex;
      flex-direction: column;

      .text_base_content {
        font-size: 30rpx;
        color: black;
        margin-top: 20rpx;
      }

      .text_task_info_title {
        margin-top: 20rpx;
        font-size: 32rpx;
        color: #e3c034;
      }

      .box_task_info_detail {
        border-radius: 26rpx;
        padding: 28rpx 56rpx 32rpx;
        margin-top: 60rpx;
        margin-left: 40rpx;
        margin-right: 40rpx;
        border: 1px solid #E1E8E8;
        display: flex;
        flex-direction: column;

        .box_goods_info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

      }

    }

    /*商品列表的样式start*/
    .product {
      margin-right: 40rpx;
      margin-left: 40rpx;
      margin-top: 48rpx;
      overflow: auto;
      left: 0;
      right: 0;
      bottom: 150px;

      p {
        text-align: center;
        font-size: 28rpx;
        color: #1b1d29;
      }

      .line {
        display: flex;
        justify-content: space-between;
        margin-bottom: 38rpx;

        .left {
          display: flex;
          flex-direction: column;
          width: calc(100% - 180rpx);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #91909a;
          width: calc(100% - 170rpx);

          .text {
            font-size: 28rpx;
            color: #1b1d29;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .flex {
            display: flex;
            justify-content: space-between;

            .font {
              uni-text {
                &:nth-child(2) {
                  margin-left: 20rpx;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }

      .income-method {
        display: flex;
        justify-content: space-between;
        padding-top: 82rpx;
        align-items: center;

        uni-text {
          font-size: 30rpx;
          color: #212121;
          width: 30%;

          &:nth-child(2) {
            font-size: 24rpx;
            color: #616161;
          }
        }
      }
    }

    /*商品列表的样式end*/
  }
}
</style>
